@import "./light.scss";
@import "./dark.scss";
@import "./media.scss";
@import "./visible.scss";
@import "./animation.scss";
*, *:before, *:after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    list-style: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
:root,body{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    padding: 0;
    margin: 0;
}
:root{
    --ph-rvw:0.13333333333333333vw;
    --phr:0.5;
    --ph-fs:var(--phx);
    --ph-lh:1.5;
    --ph-ff: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    
    --ph-fw: 400;
    --ph-fw-m: 500;

    --ph-c-white:#FFFFFF;
    --ph-c-dark:#000000;

    --ph-zdx-mask: 1000;
    --ph-zdx-aside: 1001;
    --ph-zdx-notify: 1049;
    --ph-zdx-popup: 1000;
    --ph-zdx-popover: 1030;
    --ph-zdx-floating-panel: 900;
    --ph-zdx-modal: 9999;
    --ph-zdx-keyboard: 1050;

    --ph-info:rgb(69, 150, 255);
    --ph-info-a1:rgb(69, 150, 255,.1);
    --ph-info-a4:rgb(69, 150, 255,.4);
    --ph-success:rgb(87, 189, 124);
    --ph-success-a1:rgb(87, 189, 124,.1);
    --ph-success-a4:rgb(87, 189, 124,.4);
    --ph-warning:rgb(255, 149, 79);
    --ph-warning-a1:rgb(255, 149, 79,.1);
    --ph-warning-a4:rgb(255, 149, 79,.4);
    --ph-danger:rgb(229, 93, 93);
    --ph-danger-a1:rgb(229, 93, 93,.1);
    --ph-danger-a4:rgb(229, 93, 93,.4);
    --ph-error:rgb(229, 93, 93);
    --ph-noble:rgb(145, 102, 255);
    --ph-noble-a1:rgb(145, 102, 255,.1);
    --ph-noble-a4:rgb(145, 102, 255,.4);

    --ph-danger-bg:#fef0f0;
    --ph-danger-c:#a94442;
    --ph-danger-bd:#fde2e2;

    --ph-warning-bg:#fdf6ec;
    --ph-warning-c:#a76b11;
    --ph-warning-bd:#faecd8;

    --ph-info-bg:#d9edf7;
    --ph-info-c:#0f56a0;
    --ph-info-bd:#b5ddf1;

    --ph-success-bg:#f0f9eb;
    --ph-success-c:#225723;
    --ph-success-bd:#dff0d8;

    --ph-noble-bg:#e5dbff;
    --ph-noble-c:#6d33ff;
    --ph-noble-bd:#b699ff;

    --ph-primary: var(--ph-danger);
    --ph-primary-a1:var(--ph-danger-a1);//#111D2C;
    --ph-primary-a4:var(--ph-danger-a4);
    --ph-primary-bg:var(--ph-danger-bg);
    --ph-primary-c:var(--ph-danger-c);
    --ph-primary-bd:var(--ph-danger-bd);

    --ph-ts-l: all .15s linear;
    --ph-ts-ei: all .15s cubic-bezier(0.32,0,0.67,0);
    --ph-ts-eo: all .15s cubic-bezier(0.33,1,0.68,1);
    --ph-ts-eio: all .15s cubic-bezier(0.34,1.56,0.64,1);

    --ph-shadow-1:0 1px 2px -2px rgb(0 0 0 /16%),0  3px 6px 0 rgb(0 0 0 /12%),0 5px 12px 4px rgb(0 0 0 /9%);
    --ph-shadow-2:0 3px 6px -4px rgb(0 0 0 /12%),0 6px 16px 0 rgb(0 0 0 /8%),0 9px 28px 8px rgb(0 0 0 /5%);
    --ph-shadow-3:0 6px 16px -8px rgb(0 0 0 /8%),0 9px 28px 0 rgb(0 0 0 /5%),0 12px 48px 16px rgb(0 0 0 /3%);
    --ph-shadow-dark:0 3px 6px -4px rgb(0 0 0 /12%),0 6px 16px 0 rgb(0 0 0 /8%),0 9px 28px 8px rgb(0 0 0 /5%);
    --ph-shadow-l12:0 2px 12px 0 rgba(0,0,0,.1);
    --ph-shadow-l8:0 2px 8px 0 rgba(0,0,0,.1);
    
    
    // --ph-oceanblue-900: #000843;
    // --ph-oceanblue-800: #000d44;
    // --ph-oceanblue-700: #021b52;
    // --ph-oceanblue-600: #012760;
    // --ph-oceanblue-500: #002e68;
    // --ph-oceanblue-400: #00467a;
    // --ph-oceanblue-300: #015e8a;
    // --ph-oceanblue-200: #0289ac;
    // --ph-oceanblue-100: #7cb9cf;
    // --ph-oceanblue-50: #e5f6ff;
    // --ph-black-900: #243042;
    // --ph-black-800: #24272e;
    // --ph-black-700: #666667;
    // --ph-black-600: #7a7a7b;
    // --ph-black-500: #a3a3a5;
    // --ph-black-400: #c2c2c3;
    // --ph-black-300: #e4e4e6;
    // --ph-black-200: #f1f1f2;
    // --ph-black-100: #e8eaed;
    // --ph-black-50: #f3f7fb;
    // --ph-coffee-900: #5d3832;
    // --ph-coffee-800: #6e463e;
    // --ph-coffee-700: #7e5348;
    // --ph-coffee-600: #8f6052;
    // --ph-coffee-500: #9c6a59;
    // --ph-coffee-400: #ae8174;
    // --ph-coffee-300: #c0988c;
    // --ph-coffee-200: #d6b5ae;
    // --ph-coffee-100: #ecd2ca;
    // --ph-coffee-50: #feece3;
    // --ph-spring-green-900: #42705d;
    // --ph-spring-green-800: #508f78;
    // --ph-spring-green-700: #57a087;
    // --ph-spring-green-600: #5fb098;
    // --ph-spring-green-500: #66bfa5;
    // --ph-spring-green-400: #70cab2;
    // --ph-spring-green-300: #85d6c0;
    // --ph-spring-green-200: #a8e3d2;
    // --ph-spring-green-100: #c9ece3;
    // --ph-spring-green-50: #caece7;
    // --ph-indigo-900: #133891;
    // --ph-indigo-800: #234aa6;
    // --ph-indigo-700: #2c54b2;
    // --ph-indigo-600: #375fbe;
    // --ph-indigo-500: #3d67ca;
    // --ph-indigo-400: #617fd0;
    // --ph-indigo-300: #7f98d7;
    // --ph-indigo-200: #a5b7e2;
    // --ph-indigo-100: #c9d2ec;
    // --ph-indigo-50: #ecedf7;
    // --ph-purple-900: #2c2b9f;
    // --ph-purple-800: #4238ad;
    // --ph-purple-700: #4f3db7;
    // --ph-purple-600: #5e45bf;
    // --ph-purple-500: #664ac6;
    // --ph-purple-400: #7e64ce;
    // --ph-purple-300: #9580d8;
    // --ph-purple-200: #b3a7e1;
    // --ph-purple-100: #d3caec;
    // --ph-purple-50: #eee9f7;
    // --ph-orchid-900: #7f248e;
    // --ph-orchid-800: #9b2f9b;
    // --ph-orchid-700: #ab35a3;
    // --ph-orchid-600: #bd3eaa;
    // --ph-orchid-500: #cb42b1;
    // --ph-orchid-400: #d55dba;
    // --ph-orchid-300: #dc7cc6;
    // --ph-orchid-200: #e3a4d5;
    // --ph-orchid-100: #edcae4;
    // --ph-orchid-50: #f7ebf4;

    &[f-theme=danger]{
        --ph-primary: var(--ph-danger);
        --ph-primary-a1:var(--ph-danger-a1);//#111D2C;
        --ph-primary-a4:var(--ph-danger-a4);
        --ph-primary-bg:var(--ph-danger-bg);
        --ph-primary-c:var(--ph-danger-c);
        --ph-primary-bd:var(--ph-danger-bd);
    }
    &[f-theme=success]{
        --ph-primary: var(--ph-success);
        --ph-primary-a1:var(--ph-success-a1);//#111D2C;
        --ph-primary-a4:var(--ph-success-a4);
        --ph-primary-bg:var(--ph-success-bg);
        --ph-primary-c:var(--ph-success-c);
        --ph-primary-bd:var(--ph-success-bd);
    }
    &[f-theme=info]{
        --ph-primary: var(--ph-info);
        --ph-primary-a1:var(--ph-info-a1);//#111D2C;
        --ph-primary-a4:var(--ph-info-a4);
        --ph-primary-bg:var(--ph-info-bg);
        --ph-primary-c:var(--ph-info-c);
        --ph-primary-bd:var(--ph-info-bd);
    }
    &[f-theme=warning]{
        --ph-primary: var(--ph-warning);
        --ph-primary-a1:var(--ph-warning-a1);//#111D2C;
        --ph-primary-a4:var(--ph-warning-a4);
        --ph-primary-bg:var(--ph-warning-bg);
        --ph-primary-c:var(--ph-warning-c);
        --ph-primary-bd:var(--ph-warning-bd);
    }
    &[f-theme=noble]{
        --ph-primary: var(--ph-noble);
        --ph-primary-a1:var(--ph-noble-a1);//#111D2C;
        --ph-primary-a4:var(--ph-noble-a4);
        --ph-primary-bg:var(--ph-noble-bg);
        --ph-primary-c:var(--ph-noble-c);
        --ph-primary-bd:var(--ph-noble-bd);
    }
}
body{
    color: var(--ph-c);
    font-size: var(--phx);
    font-family: var(--ph-ff);
    line-height: var(--ph-lh);
    background-color: var(--ph-bg-doc);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    &[f-scroll-forbidden=true]{
        touch-action: none; overflow: hidden;
    }
}

input,textarea{
    outline: 0;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    line-height: inherit;
    appearance: none;
    border-width: 1px;
    border-style: solid;
    transition: all .15s ease;
    border-color: var(--ph-bc);
    background-color: var(--ph-input-bg);
    border-radius: 2px;
    &::-webkit-input-placeholder{
        color: var(--ph-c-l1);
    }
}
*:disabled{
    cursor: not-allowed!important;
}
.ph-pointer{
    cursor: pointer!important;
}
.ph-height-anim{
	transition: height .3s ease;
	backface-visibility:hidden;
	overflow: hidden;
}
.ph-title{
    padding: var(--ph-10) var(--ph-15);
    font-size: var(--ph-fs);
    color: var(--ph-c-d1);
}
.ph-block{
    padding: var(--ph-pd-lg);
    background-color: var(--ph-block-bg);
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--ph-pd);
}
.ph-link,
.ph-text{
    font-size: var(--ph-fs);
    &-primary{
        color: var(--ph-primary);
    }
    &-danger{
        color: var(--ph-danger);
    }
    &-warning{
        color: var(--ph-warning);
    }
    &-success{
        color: var(--ph-success);
    }
}
.ph-link{
    color: var(--ph-primary);
    text-decoration: none;
}
a,button{
    cursor: pointer;
    font-weight: 500;
}
.ph-sample{
    position: static!important;
    display: inline!important;
    z-index: 0;
}
.ph-loading-icon{
    backface-visibility: hidden;
    animation: ph-rotate 1s linear infinite;
}